<template>
  <div class="app-container">

    <el-form :inline="true" :model="pageParams">
      <el-form-item label="日期范围">
        <el-date-picker
          v-model="pageParams.daterange"
          size="small"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          :default-time="['00:00:00', '23:59:59']"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="small"
          icon="el-icon-search"
          @click="handleSearch"
        >查询</el-button
        >
      </el-form-item>
    </el-form>
    <!-- </template> -->
    <el-row :gutter="20">
      <el-col :xs="24" :md="24">
        <el-card v-loading="loading" shadow="hover">
          <i class="el-icon-s-data d2-pb">
            <span class="d2-pl-5">邀请信息趋势</span>
          </i>
          <ve-line
            :data="userInviteStatistics"
            :settings="userSettings"
            :toolbox="toolbox"
            :change-delay="300"
          ></ve-line>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import {queryIndex} from "@/api/broker/broker";


export default {
  name: 'index',
  components: {},
  data() {
    return {
      userSettings: {
        labelMap: {
          days: '日期',
          regCount: '总注册人数'
        }
      },
      toolbox: {
        feature: {
          magicType: { type: ['line', 'bar'] }
          // saveAsImage: {}
        }
      },
      pageParams: {
        startDate: '',
        endDate: '',
        daterange: ''
      },
      queryParams: {
        startDate: '',
        endDate: '',
        daterange: ''
      },
      // 邀请用户统计
      userInviteStatistics: {
        columns: ['days', 'regCount'],
        rows: []
      },
      loading: true
    }
  },
  created(){
    const end = new Date()
    const start = new Date()
    start.setMonth(start.getMonth() - 5)
    this.queryParams.startDate = start
    this.queryParams.endDate = end
    this.pageParams = this.queryParams;
    this.pageParams.daterange = [this.queryParams.startDate, this.queryParams.endDate]
    this.getIndex();
  },
  methods: {
    getIndex() {
      this.loading = true;
      var startDate = this.pageParams.startDate;
      var endDate = this.pageParams.endDate;
      var year = startDate.getFullYear();
      var month = this.formatNumber(startDate.getMonth() + 1);
      this.queryParams.startDate = year + '-' + month;
      year = endDate.getFullYear();
      month = this.formatNumber(endDate.getMonth() + 1);
      this.queryParams.endDate = year + '-' + month;
      console.log(this.queryParams)
      queryIndex(this.queryParams).then(response => {
        this.userInviteStatistics.rows = response.rows
        this.loading = false
      });
    },
    formatNumber(num){
      return num < 10 ? '0' + num : num;
    },
    handleSearch () {
      if (this.pageParams.daterange) {
        this.pageParams.startDate = this.pageParams.daterange[0]
        this.pageParams.endDate = this.pageParams.daterange[1]
        this.getIndex()
      }
    }
  }
}
</script>
